<template>
  <div class="hello">
    <div id="draw-map" class="draw-map"></div>
  </div>
</template>

<script>
import Map from "ol/Map";
import ImageLayer from "ol/layer/Image";
import View from "ol/View";
import ImageStaticSource from "ol/source/ImageStatic";
import Projection from "ol/proj/Projection";
import LayerGroup from "ol/layer/Group";
import { getCenter } from "ol/extent";
import TileLayer from "ol/layer/Tile";
import { Vector as VectorLayer } from "ol/layer";
import { OSM, TileDebug, Vector as VectorSource } from "ol/source";
import Point from "ol/geom/Point";
import LineString from "ol/geom/LineString";
import Feature from "ol/Feature";
import axios from "axios";
import {
  Circle as CircleStyle,
  Fill,
  Stroke,
  Style,
  Text,
  Icon
} from "ol/style";

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data: () => {
    return {};
  },
  async mounted() {
    let map = new Map({
      target: "draw-map",
      layers: []
    });
    // this.map = map;
    // debugger;
    let extent = [0, 0, 8192, 8192];
    let proj = new Projection({
      extent: extent,
      code: "pixels"
    });
    let imageLayer = new ImageLayer({
      // attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
      source: new ImageStaticSource({
        url:
          "http://n1-q.mafengwo.net/s15/M00/65/3A/CoUBGV3Lq_-AMUWQAFpEc9eNUu8144.jpg#Vikendi.jpg8192",
        projection: proj,
        imageExtent: extent
        // imageSize:[100,100]
      })
    });
    let point = new Point([8192, 8192 / 2]);
    let feature = new Feature(point);
    let vecLayer = new VectorLayer({
      source: new VectorSource({
        features: [feature]
      })
    });
    map.setLayerGroup(
      new LayerGroup({
        layers: [
          imageLayer,
          new TileLayer({
            source: new TileDebug(),
            opacity: 0.1
          }),
          vecLayer
        ]
      })
    );
    map.setView(
      new View({
        // zoom:1,
        // minZoom:1,
        // maxZoom:1,
        projection: proj,
        extent: [0, 0, 8192, 8192],
        center: getCenter(extent),
        resolution: 8192 / 900,
        minZoom: 1,
        maxZoom: 7
      })
    );
    let { locations } = await this.get_test_json();
    // debugger;
    let locationPoints = locations.map(e => new Point([e.x, e.y]));
    let locationFeatures = locationPoints.map(e => new Feature(e));
    let locationLayer = new VectorLayer({
      source: new VectorSource({
        features: locationFeatures
      }),
      style: function(feature) {
        var size = 10;
        let style = new Style({
          image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
              color: "#ff0080"
            }),
            fill: new Fill({
              color: "#ff0070"
            })
          })
        });
        return style;
      }
    });
    map.addLayer(locationLayer);

    (function() {
      let locationPoints = [{ x: 0, y: 0 }, { x: 1000, y: 1000 }].map(
        e => new Point([e.x, e.y])
      );
      let locationFeatures = locationPoints.map(e => new Feature(e));
      let locationLayer = new VectorLayer({
        source: new VectorSource({
          features: locationFeatures
        }),
        style: function(feature) {
          var size = 10;
          let style = new Style({
            image: new Icon({
              src:
                "http://p1-q.mafengwo.net/s14/M00/78/98/wKgE2l03FwmACJCBAAAGUBYVhkY189.png#9NCW6CXI~D5%}U46W%_7WW3.png",
              // size:[150,150],
              crossOrigin: ""
              // color:"gray"
            })
          });
          return style;
        }
      });
      map.addLayer(locationLayer);
    })();

    (function() {
      let coords = [];
      for (let p of locationPoints) {
        coords.push(p.getCoordinates());
      }
      let lineString = new LineString(coords);
      let locLines = [lineString];
      let locLinesFeatures = locLines.map(e => {
        let f = new Feature(e);
        // f.setStyle(new Style({}));
        return f;
      });
      let locLineLayer = new VectorLayer({
        source: new VectorSource({
          features: locLinesFeatures
        }),
        style: function(feature) {
          var size = 10;
          let style = new Style({
            fill: new Fill({
              color: "#ff0080"
            }),
            stroke: new Stroke({
              color: "black",
              width: 4
            })
          });
          return style;
        }
      });
      map.addLayer(locLineLayer);
    })();

    let locLines = locationPoints
      .map((e, i, a) => {
        if (i == 0) {
          return null;
        }
        let start = a[i - 1].getCoordinates();
        let end = e.getCoordinates();
        let lineString = new LineString([start, end]);
        return lineString;
      })
      .filter(e => !!e);
    let locLinesFeatures = locLines.map(e => {
      let f = new Feature(e);
      // f.setStyle(new Style({}));
      return f;
    });
    let locLineLayer = new VectorLayer({
      source: new VectorSource({
        features: locLinesFeatures
      }),
      style: function(feature) {
        var size = 10;
        let style = new Style({
          fill: new Fill({
            color: "#ff0080"
          }),
          stroke: new Stroke({
            color: "#FFff78",
            width: 4
          })
        });
        return style;
      }
    });
    // map.addLayer(locLineLayer);
    // debugger;

    // let locLineFeature = new Feature(locLine);
  },
  methods: {
    /**
     * @returns {Promise<{locations:Array<{x:Number,y:Number}>}>}
     */
    get_test_json() {
      return new Promise(resolve => {
        axios
          .get(
            "http://m.tuniucdn.com/fb2/t1/G6/M00/1B/27/Cii-U13L2oGIFW6zAADIEdK4lc4AAC8ngGY9_MAAMgp25.json"
          )
          .then(axresp => {
            let locations = axresp.data.map(e => e["character"]["location"]);
            locations = locations.map(l => {
              let x = l.x;
              let y = 612000 - l.y;
              // let x = l.x;
              // let y = l.y;

              return {
                x: (x / 612000) * 8192,
                y: (y / 612000) * 8192
              };
            });
            // debugger;
            resolve({
              locations: locations
            });
          });
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

#draw-map {
  width: 900px;
  height: 900px;
}
</style>
